<template>
          <div class="container">
              <div class="view">
                  <span class="emoji-mart-emoji 1f618 kissing_heart Face Throwing a Kiss">
                      {{content}}
                  </span>
              </div>

    <!-- 
    search: 'Search Results',
    recent: 'Frequently Used',
    people: 'Smileys & People',
    nature: 'Animals & Nature',
    foods: 'Food & Drink',
    activity: 'Activity',
    places: 'Travel & Places',
    objects: 'Objects',
    symbols: 'Symbols',
    flags: 'Flags',
    custom: 'Custom',-->
    <picker
      :include="['people']"
      :showSearch="false"
      :showPreview="false" 
      :showCategories="false"
      @select="addEmoji"
    />
    <!-- <nimble-picker set="messenger" :data="data" /> -->
  </div>
</template>

<script>
import { Picker } from "emoji-mart-vue";
// import data from 'emoji-mart-vue/data/messenger.json'
// import { NimblePicker } from 'emoji-mart-vue'
export default ({
    data() {
        return{
            content:''
            // data:data,
        }
    },
    methods:{
        addEmoji(e){
            // console.log(e,'---ee')
            this.content += e.native
            this.$emit('chooseEmoji',e.native)
        }
    },
    components:{
        Picker,
        // NimblePicker,
    }

})
</script>

<style scoped>
.view{font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji", -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif!important ;}
.container,.emoji-mart{
    width: 100%!important;
}
.emoji-mart[data-v-7bc71df8] {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 250px;
  color: #ffffff !important;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
}
.text {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 400px;
  resize: none;
  box-sizing: border-box;
  padding: 5px 10px;
  border-radius: 8px;
}
.text-place {
  height: 80px;
  box-sizing: border-box;
  padding: 5px 10px;
  border-radius: 8px;
  background: #ddd5d5;
}
.text-place p {
  display: flex;
  align-items: center;
  margin: 0;
}
</style>